<template>
    <div class="search">
        <div class="homeimg">
            <vue-particles
                color="#fff"
                :particleOpacity="0.7"
                :particlesNumber="100"
                shapeType="circle"
                :particleSize="4"
                linesColor="#fff"
                :linesWidth="1"
                :lineLinked="true"
                :lineOpacity="0.4"
                :linesDistance="150"
                :moveSpeed="2"
                :hoverEffect="true"
                hoverMode="grab"
                :clickEffect="true"
                clickMode="push"
                class="lizi">
            </vue-particles>
        </div>
        <div class="home-container">
            <span class="el-icon-search"></span>
            <el-input placeholder="区块高度/区块哈希/交易哈希" v-model="inputVal" clearable @keydown.enter.native="search"></el-input>
        </div>
        <loading v-if="load"/>
        <div style="width:100%; height:500px;" v-if="pageError">
            <h1 style="line-height:500px; text-align: center">没有搜索结果</h1>
        </div>
        <div class="search-container" v-if="searchData&&!pageError">
            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th>区块号</th>
                        <th>区块 hash</th>
                        <th>交易数量</th>
                        <th>打包时间</th>
                        <th>生成时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-if="searchData.Number">
                        <td>{{searchData.Number}}</td>
                        <td><router-link :to="'/HashDetail/' + id">{{searchData.Hash}}</router-link></td>
                        <td>{{searchData.Txcounts}}</td>
                        <td>{{searchData.AvgTime}}ms</td>
                        <td>{{searchData.WriteTime | formatDate}}</td>
                    </tr>
                    <tr v-if="searchData.BlockNumber">
                        <td>{{searchData.BlockNumber}}</td>
                        <td><router-link :to="'/Transactions/' + id">{{searchData.BlockHash}}</router-link></td>
                        <td>{{searchData.TxIndex}}</td>
                        <td>{{searchData.ExecuteTime}}ms</td>
                        <td>{{searchData.Timestamp | formatDate}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script>
import loading from './loading.vue'
export default {
    data: function () {
        return {
            id: this.$route.params.id,
            inputVal: this.$route.params.id,
            searchData: null,
            load: true,
            pageError: false
        }
    },
    methods: {
        search: function () {
            this.load = true;
            this.pageError = false;
            let todo = this.inputVal
            let getParams = {}
            if ( todo.length < 10 ) {
                getParams = {
                    type: "number",
                    value: this.inputVal
                }
                this.$http.get("/api/block/query",{params:getParams}).then(data => {
                    location.hash = "#/Search/" + data.body.block.Hash
                    this.id = data.body.block.Hash
                })
                
            } else {
                getParams = {
                    type: "hash",
                    value: this.inputVal
                }
                location.hash = "#/Search/" + todo;
            }
            
            this.$http.get("/api/block/query",{
                params: getParams
            }).then(data => {
                if (data.body.block) {
                    this.searchData = data.body.block;
                } else {
                    this.searchData = data.body.Transaction;
                }
                this.load = false
            }, err => {
                this.open();
                this.load = false;
                this.pageError = true;
            })
        },
        open(todo) {
            this.$alert('没有搜索结果', '无结果', {
            confirmButtonText: '确定',
            callback: action => {
                this.$message({
                type: 'info',
                message: `action: ${ action }`
                });
            }
            });
        }
    },
    watch:{
        '$route': function (newVal) {
            
        }
    },
    created: function () {
       this.search()

    },
    filters:{
        formatDate: function (val) {
            return new Date(parseInt(val)/1000/1000).toLocaleString(); 
        }
    },
    components: {
        'loading': loading
    }
}
</script>
<style>
.search{
  width: 100%;
}
.search .homeimg{
  width: 100%;
  height: 200px;
  background: url("../assets/home-bg.png");
  position: absolute;
  z-index: 0;
}
.search .home-container{
  
  color: #c3c8cc;
  position: relative;
  width: 1000px;
  margin: 0 auto;
  height: 200px;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
}
.search .home-container .el-input{
    top: 80px;

}
.home-container .el-input input{
    padding-left: 70px;
    padding-right: 48px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #c3c8cc;
    width: 800px;
    height: 64px;
    background-color: hsla(0,0%,100%,.1);
    border: 2px solid #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);
}
.home-container .el-input .el-input__suffix{
  padding-right: 120px;
  margin-top: -8px;
}
.search .home-container .el-icon-search{
  font-size: 20px;
  position: absolute;
  top: 103px;
  left: 130px;
}
.search-container{
    width: 1000px;
    margin: 100px auto
}
</style>
